import React, { useRef, useState } from 'react'
import { Button, Table, Image } from 'antd'


// npm install xlsx --save
import * as XLSX from 'xlsx'


export default function Import() {

    const inpRef = useRef()

    const [proList, setProList] = useState([])

    const columns = [
        { 
            title: '商品图片', 
            dataIndex: 'img1',
            render: (v) => {
                return <Image src={v} style={{ width: 100 }} alt="加载失败" />
            } 
        },
       { 
                title: '商品名称', 
                dataIndex: 'proname' 
            },
            { 
                title: '商品分类', 
                dataIndex: 'category' 
            },
            { 
                title: '商品价格', 
                dataIndex: 'originprice' 
            },
            { 
                title: '商品折扣', 
                dataIndex: 'discount' 
            },
    ]



    const changeFile = (event) => {
        // console.log(event.target.files[0])
        // 1.获取选择的文件
        const file = event.target.files[0]

        // 2.创建一个文件加载器
        const reader = new FileReader()

        // 3.将文件转换成数据流
        reader.readAsArrayBuffer(file)

        // 4.加载成功之后的回调函数
        reader.onload =  () => {
            // console.log(reader.result)
            // 5.将数据流转换成 js 对象
            let data =  XLSX.read(reader.result, { type: 'buffer' })

            // 6.读取所需要工作表的数据 -工作表1
            data = data.Sheets['工作表1']

            // 7.工作表数据转换成 json 对象
            data = XLSX.utils.sheet_to_json(data)

            // 8.将数据放在相应式数据中然后显示出来
            setProList(data)


            console.log(data);
            
        }

    }

    return (
        <div>
            <input type="file"  onChange={changeFile} ref={inpRef} hidden />
            <Button style={{fontWeight:500,color:'#58c'}} onClick={() => inpRef.current.click()}>选择文件</Button>
            <Table
                dataSource={proList}
                columns={columns}
                rowKey={'proid'}
                scroll={{ y: 450 }}
            ></Table>
        </div>
    )
}
